<template>
	<view>
		<view class="header">
			<image :src="baseURL+data.avatar" mode=""></image>
			<view class="RWname">{{data.title}}</view>
			<view class="datetime">{{data.overtime}}</view>
		</view>
		<view class="content">
			{{data.content}}
		</view>
		<button type="primary" class="complete" :disabled="data.status==3" @click="wanc">我已完成</button>
		<view class="comment">
			<!-- 评论区 start -->
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="(item,index) in data.logs" :key='index'>
					<view class="uni-comment-face"><image :src="baseURL+item.avatar" mode="widthFix"></image></view>
					<view class="uni-comment-body">
						<view class="uni-comment-content">{{item.review}}</view>
						<view class="uni-comment-date">	
							<view>{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论区 end -->
		</view>
		<view class="input_bottom">
			<view class="input_bottom_box">
				<input type="text" v-model="comment" placeholder="写评论..." @confirm="taskLogAdd"/>
			</view>
			<view class="more"><button type="primary" @click="taskLogAdd">评论</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id:"",
				data:'',
				comment:'',
				baseURL:this.$API.baseURL,
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.taskDetail();
		},
		methods:{
			// 2填写回复意见
			taskLogAdd(){
				var _this = this;
				uni.request({
					url:this.$API.taskLogAdd,
					method:"POST",
					data:{
						'task_log.u_id':uni.getStorageSync("userid"),//任务ID
						'task_log.t_id':this.id, //任务完成
						'task_log.review':this.comment, //任务完成
					},
					header:this.$API.get_head(),
					success: (res) => {
						uni.showToast({
							title:"操作成功",
							icon:'none'
						})
						_this.comment='';
						_this.taskDetail();
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//完成
			wanc(){
				var _this = this;
				uni.request({
					url:this.$API.taskUpdate,
					method:"POST",
					data:{
						userid:uni.getStorageSync("userid"),// 用户id 
						'task.id':this.id,//任务ID
						'task.status':3 //任务完成
					},
					header:this.$API.get_head(),
					success: (res) => {
						uni.showToast({
							title:"操作成功",
							icon:'none'
						})
						_this.data.status=3
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//获取任务详情
			taskDetail(){
				var _this = this;
				uni.request({
					url:this.$API.taskDetail,
					method:"GET",
					data:{userid:uni.getStorageSync("userid"),id:this.id},
					header:this.$API.get_head(),
					success: (res) => {
						_this.data = res.data.data
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
		}
	}
	
</script>

<style lang="scss">
	*{font-family:"微软雅黑";}
	.header{
		display: flex;
		padding:20upx;
		background:#FFFFFF;
		image{
			width:100upx;
			height:100upx;
			border-radius:50%;
			margin:0 20upx;
			vertical-align: middle;
		}
		.RWname{
			font-weight:bold;
			font-size:28upx;
			color:#333333;
			width:429upx;
			line-height:1.2;
		}
		.datetime{
			color:#AAAAAA;
			width:160rpx;
			line-height:1.2;
		}
	}
	.content{
		padding:20upx;
		background:#FFFFFF;
		overflow: hidden;
	}
	.complete{
		width:80%;
		margin:20upx auto;
	}

	/* 评论区 */
	.comment{
		margin-bottom:80upx;
	}
	.uni-comment{
		background: #FFFFFF;
	}
	.uni-comment-list{
		padding: 0rpx 30rpx;
		padding-bottom: 10rpx;
		border-bottom:1upx solid #e5e5e5;
		width: auto !important;
	}
	.uni-comment-body{
		width:585upx;
		top: 0;
		right:0;
	}
	.uni-comment-content{
		color: #222222;
		font-size:30upx;
	}
	.uni-comment-date{
		color: #222222;
		font-size:22upx;
	}
	.uni-comment-face{
		width:80upx;
		height:80upx;
		margin-right:35upx;
	}
	/*输入框*/
	.input_bottom{
		height:68upx;	
		background:#FFFFFF;
		position:fixed;
		bottom:0;
		left:0;
		/* width:100%; */
		display:flex;
		padding: 15rpx 20rpx;
		box-shadow: #CCCCCC 20rpx 20rpx 20rpx 20rpx;
		width: 710rpx;
		overflow: hidden;
	}
	.input_bottom input{
		width:490upx;
		height:68upx;
		border:1upx solid #e8e8e8;
		border-radius:34upx;
		background:#f4f4f5;
		padding-left:20upx;
		padding-right:90upx;
	}
	.input_bottom>.more>button{
		width: 90rpx;
		height: 54rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		padding: 0;
		line-height: 2.2;
		color: #fff;
	}
	.input_bottom_box{
		position:relative;
	}
	.input_bottom_box .expression{
		position:absolute;
		width:40upx;
		height:40upx;
		right:40upx;
		top:16upx;
	}
	.pinglun{margin-bottom:68upx;}
</style>
